<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button type="button"> 信息</button>
<div>
    <h3>姓名 <span id="name"></span></h3>
    <h3>工资 <span id="salary"></span></h3>
    <h3>课程 <span id="lesson"></span></h3>
    <h3>网站 <span id="siteName"></span></h3>
    <h3>域名 <span id="domain"></span></h3>
</div>
</body>
<script>
    window.onload = function () {
        document.getElementsByTagName('button')[0].onclick = function(){
            //1
            //字面量创建JSON对象
            //属性使用双引号
            //最后不要逗号

            //2转为字符串
            // let json = '{\
            //     "name":"黄定鑫",\
            //     "salary":100,\
            //     "lesson":["php","js","css","jquery","html"],\
            //     "website":{\
            //         "siteName":"php中文网",\
            //         "domain":"www.php.cn"\
            //     }\
            // }';

            let request = new XMLHttpRequest();

            request.open('GET','file/demo.json');
            request.send();

            //监听
            request.onreadystatechange = function(){
                if (request.status == 200 && request.readyState == 4){
                    //第二步使用
                    // let data = eval("("+json+")");

                    //第三部使用
                    let data = JSON.parse(request.responseText);

                    document.getElementById('name').innerHTML = data.name;
                    document.getElementById('salary').innerHTML = data.salary;
                    document.getElementById('lesson').innerHTML = data.lesson[2];
                    document.getElementById('siteName').innerHTML = data.website.siteName;
                    document.getElementById('domain').innerHTML = data.website.domain;

                }
            }


        }
    }
</script>
</html>